import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:xin_he/page/adopt/model/xin_he_adopt_tree_model_entity.dart';
import 'package:xin_he/routes/xin_he_routes.dart';

import '../../../utils/xh_styles.dart';
import '../../../utils/xin_he_image.dart';
import '../../shopping_car/models/xin_he_goods_model.dart';
import '../../shopping_car/xin_he_goods_payment/xin_he_payment_methods_model.dart';
import 'xin_he_adopt_payment_logic.dart';

class XinHeAdoptPaymentPage extends StatelessWidget {
  XinHeAdoptPaymentPage({Key? key}) : super(key: key);

  final logic = Get.put(XinHeAdoptPaymentLogic());
  final state = Get.find<XinHeAdoptPaymentLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        leading: IconButton(
            onPressed: (){
              Get.back();
            },
            icon: Container(
              padding: const EdgeInsets.only(left: 7),
              alignment: Alignment.centerLeft,
              child: const XinHeAssetImage(
                'assets/images/home/app_back_3.png',
                width: 9.5,
                height: 17,
                fit: BoxFit.cover,),
            )
        ),
        title: const Text('确认订单',style: TextStyle(color: Colors.black , fontSize: 18,fontWeight: FontWeight.w600),),
        backgroundColor: Colors.white,
        shadowColor: Colors.transparent,
      ) ,
      body: Obx(() => Column(children: [

        Expanded(child: ListView(children: [
          SizedBox(height: 10,),
          ///商品信息
          _itemView(logic.treeModel.value),
          ///赠送
          Container(
            margin: const EdgeInsets.symmetric(horizontal: 15),
            padding: const EdgeInsets.symmetric(horizontal: 15),
            decoration: const BoxDecoration(color: Colors.white,borderRadius: BorderRadius.only(bottomLeft: Radius.circular(7),bottomRight: Radius.circular(7))),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                SizedBox(height: 10,),
                Text('赠送',style: TextStyle(color: XinHeColor('#222222'),fontWeight: FontWeight.bold,fontSize: 14),),
                SizedBox(height: 15,),
                Row(children: [
                  Text('茶油卡',style: TextStyle(color: XinHeColor('#666666'),fontWeight: FontWeight.w500,fontSize: 12),),
                  Spacer(),
                  Text('${logic.treeModel.value.teaOilCard}',style: TextStyle(color: XinHeColor('#333333'),fontWeight: FontWeight.w500,fontSize: 12),),


                ],),
                SizedBox(height: 5,),

                Row(children: [
                  Text('云茶籽',style: TextStyle(color: XinHeColor('#666666'),fontWeight: FontWeight.w500,fontSize: 12),),
                  Spacer(),
                  Text('${logic.treeModel.value.yunChaSeed}',style: TextStyle(color: XinHeColor('#333333'),fontWeight: FontWeight.w500,fontSize: 12),),


                ],),
                const SizedBox(height: 5,),

                Row(children: [
                  Text('消费金红包',style: TextStyle(color: XinHeColor('#666666'),fontWeight: FontWeight.w500,fontSize: 12),),
                  Spacer(),
                  Text('${logic.treeModel.value.consumerGoldRedEnvelope}',style: TextStyle(color: XinHeColor('#333333'),fontWeight: FontWeight.w500,fontSize: 12),),


                ],),
                SizedBox(height: 25,),
              ],
            ),),

          const SizedBox(height: 10,),

          ///总金额
          Container(
            margin: const EdgeInsets.symmetric(horizontal: 15),
            height: 210,
            decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(10)),
            child: Column(children: [
              totalAmountItemWidget('总金额', '${logic.getTotalPrice()}'),
              // totalAmountItemWidget('消费金红包','暂无可用'),
              // Container(
              //   height: 42,
              //   alignment: Alignment.center,
              //   padding: const EdgeInsets.symmetric(horizontal: 15),
              //   child: Row(children: [
              //     const XinHeAssetImage('assets/images/cart/pay_method_redbag.png',width:12,height:14),
              //     SizedBox(width: 5,),
              //     Text('消费金红包',style: TextStyle(color: XinHeColor('#222222'),fontSize: 13),),
              //     Spacer(),
              //     Text(logic.treeModel.value.consumerGoldRedEnvelope != null?'${logic.treeModel.value.consumerGoldRedEnvelope}' :'暂无可用',style: TextStyle(color: XinHeColor('#B0B0B0'),fontSize: 15),),
              //
              //   ],),
              // ),

              totalAmountItemWidget('运费','0.00'),
              totalAmountItemWidget('实际支付','${logic.getTotalPrice()}'),
              Container(
                height: 42,
                alignment: Alignment.center,
                padding: const EdgeInsets.symmetric(horizontal: 15),
                child: Row(children: [
                  Text('订单备注',style: TextStyle(color: XinHeColor('#222222'),fontSize: 13),),
                  Spacer(),
                  Container(
                    width: 130,
                    height: 42,
                    alignment: Alignment.centerRight,
                    child: TextField(
                      // maxLength: 8,
                      maxLines: 1,
                      keyboardType: TextInputType.text,
                      textAlign: TextAlign.right,
                      onChanged: (value){
                        // callback(value);
                      },
                      style:  TextStyle(
                          color: XinHeColor("#15161F"), fontSize: 14 ,fontWeight: FontWeight.w400),
                      decoration:  InputDecoration(
                          border: InputBorder.none,
                          contentPadding: EdgeInsets.only(bottom: 2),
                          hintText: '填写备注信息',
                          counterStyle: TextStyle(
                              color: XinHeColor("#A6A6A6"), fontSize: 13),
                          hintStyle:  TextStyle(
                              color: XinHeColor("#A6A6A6"), fontSize: 13)),
                    ),
                  ),


                ],),
              )


            ],),
          ) ,

          ////支付方式
          // Container(
          //     margin: const EdgeInsets.symmetric(horizontal: 15).copyWith(top: 15),
          //     height: 340,
          //     decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(10)),
          //     child:Column(children: [
          //       Container(
          //           height:40,
          //           alignment: Alignment.centerLeft,
          //           padding:const EdgeInsets.symmetric(horizontal: 15),
          //           child: Text('支付方式',style: TextStyle(color: XinHeColor('#222222'),fontSize: 14,fontWeight: FontWeight.w500),)),
          //       ListView.builder(
          //           padding: EdgeInsets.zero,
          //           physics: const NeverScrollableScrollPhysics(),
          //           shrinkWrap: true,
          //           itemCount:logic.payMethodsList.length,
          //           itemBuilder: (ctx,index){
          //             XinHePaymentMethodModel model = logic.payMethodsList[index];
          //             return Container(
          //               height: 50,
          //               child: Row(children: [
          //                 const SizedBox(width: 15,),
          //                 XinHeAssetImage('assets/images/cart/${logic.iconList[index]}.png',width:17.5,height:17.5),
          //                 const SizedBox(width: 5,),
          //                 Text(logic.titleList[index],style: TextStyle(color: XinHeColor('#222222'),fontSize: 13),),
          //                 Spacer(),
          //                 ///选择
          //                 GestureDetector(
          //                   onTap: (){
          //
          //                     if(!model.selected){
          //                       model.selected = !model.selected;
          //                     }
          //                     logic.payMethodsList[index] = model;
          //                     logic.selectedIndex.value = index;
          //
          //                     for(int i =0;i<logic.payMethodsList.length;i++){
          //                       if(i!=index){
          //                         XinHePaymentMethodModel model = logic.payMethodsList[i];
          //                         model.selected = false;
          //                       }
          //                     }
          //                   },
          //                   child: Padding(
          //                     padding: const EdgeInsets.only(left: 15,right: 15),
          //                     child: XinHeAssetImage( model.selected?'assets/images/cart/cart_selected.png' :'assets/images/cart/cart_unselected.png',width:18 ,height: 18,),
          //                   ),
          //                 ),
          //               ],),
          //             );
          //           })
          //     ],)
          // ),
        ],)),


        SizedBox(height: 5,),
        ///协议
        Container(
          color: Colors.transparent,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              GestureDetector(
                onTap: (){
                  logic.changeSelectedStatus();
                },
                child:Obx(() =>  Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 8,vertical: 4),
                  child:  XinHeAssetImage(state.selected.value ?'assets/images/login/login_selected.png':'assets/images/login/login_unselected.png',width: 16,height: 16,fit: BoxFit.fill),
                )),
              ),
              // SizedBox(width: 3.w,),
              RichText(
                text: TextSpan(
                    children:
                    [


                      WidgetSpan(
                        child: GestureDetector(
                          // onTap: logic.toUserProtocolPage,
                          child: Text(
                            '我已阅读并接受',
                            style: TextStyle(
                              color: XinHeColor("#8C8C8C"),
                              fontSize: 14,
                            ),
                          ),
                        ),
                      ),
                      WidgetSpan(
                        child: GestureDetector(
                          onTap: (){

                          },
                          child: Text(
                            '《认养协议》',
                            style: TextStyle(
                              color: XinHeColor("#30E9E9"),
                              fontSize: 14,
                            ),
                          ),
                        ),
                      ),

                    ]
                ),
              )

            ],
          ),
        ),

        SizedBox(height: 10,),
        SizedBox(
          // height: 60,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: [
              Container(
                height: 60,
                width: Get.width,
                color: Colors.white,
                child: Row(children: [
                  const Spacer(),
                  RichText(text: TextSpan(children: [
                    TextSpan(text:'共1件',style: TextStyle(color: XinHeColor('#666666'),fontSize: 12)),
                    TextSpan(text: '合计：${logic.getTotalPrice()}',style: TextStyle(color: XinHeColor('#222222'),fontSize: 17))
                  ])),
                  GestureDetector(
                    onTap: (){
                         // Fluwx fluwx = Fluwx();
                         // fluwx.open(target: MiniProgram(username: 'gh_af9e3be1a447'));

                      // Get.offNamed(XinHeRoutes.paySuccess);
                      logic.requestAdoptOrdersCommit();
                    },
                    child: Container(
                      height: 35,
                      padding: const EdgeInsets.symmetric(horizontal: 10),
                      margin: const EdgeInsets.symmetric(horizontal: 15),
                      decoration: BoxDecoration(
                        gradient: LinearGradient(colors: [XinHeColor('#F89A30'),XinHeColor('#E84128')]),
                        borderRadius: BorderRadius.circular(17.5),
                      ),
                      alignment: Alignment.center,
                      child: Text('提交订单',style: TextStyle(color: XinHeColor('#FFFFFF'),fontSize: 14)),

                    ),
                  )
                ],),
              ),
              Container(
                height: Get.mediaQuery.padding.bottom,
                color: Colors.white,
              ),
            ],),
        )

      ],)),

    );

  }


  Widget _itemView( XinHeAdoptTreeModelEntity model){
    return Stack(
      children: [
        Container(
          width: Get.width-30,
          height: 120,
          margin: const EdgeInsets.symmetric(horizontal: 15),
          padding: const EdgeInsets.symmetric(horizontal: 15),
          decoration: const BoxDecoration(color: Colors.white,borderRadius: BorderRadius.only(topLeft: Radius.circular(7),topRight: Radius.circular(7))),
          child:  Row(
            children: [

               Padding(
                padding:  const EdgeInsets.only(left: 0,top: 15,right: 15,bottom: 15),
                child: XinHeNetImage(url: model.iconPath??'',width: 80,height: 80,fit: BoxFit.fill,),
              ),

              ///描述与价格数量
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  SizedBox(
                      width:Get.width-30-30-80-15-15,
                      child: Text(model.name??'',maxLines: 2,softWrap: true,style: TextStyle(color: XinHeColor('#222222'),fontSize: 14,fontWeight: FontWeight.bold),)
                  ),
                  const SizedBox(height: 20,),



                  SizedBox(
                    width:Get.width-30-30-80-15-15,
                    height: 23,
                    child: Row(
                      children: [

                        RichText(
                            text: TextSpan(children: [
                              ///￥
                              TextSpan(
                                text: '￥',
                                style: TextStyle(
                                  color: XinHeColor('#E84128'),
                                  fontSize: 9,
                                  fontWeight: FontWeight.w500,
                                ),
                              ),

                              ///
                              TextSpan(
                                text: '${model.price}',
                                style: TextStyle(
                                  color: XinHeColor('#E84128'),
                                  fontSize: 16,
                                  fontWeight: FontWeight.w500,
                                ),
                              ),

                            ]
                            )),
                        const Spacer(),

                        Text('x${logic.treeModel.value.num}',style: TextStyle(color: XinHeColor('#8B9191'), fontSize: 12, fontWeight: FontWeight.w500,)
                        ),
                        const SizedBox(width: 0,)

                      ],
                    ),
                  )

                ],)


            ],
          ),
        ),

        Positioned(
          bottom: 0,
          right: 30,
          child: Container(
            width: Get.width-30-30,
            color: XinHeColor('#E7EEEE'),
            height: 0.5,),
        )

      ],
    );
  }

  Widget  totalAmountItemWidget(String title,String titleValue){
    return Container(
      height: 42,
      alignment: Alignment.center,
      padding: const EdgeInsets.symmetric(horizontal: 15),
      child: Row(children: [
        Text(title,style: TextStyle(color: XinHeColor('#222222'),fontSize: 13),),
        Spacer(),
        Text(titleValue,style: TextStyle(color: XinHeColor('#222222'),fontSize: 15),),

      ],),
    );
  }


}
